<template>
  <el-container class="setting-member_setting-member_memberFieldSet">
    <el-main>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :refresh="{query: getList}">
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" @click="openDialog(0,false)">新增字段</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTree"
          border
          row-key
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"

          width
          max-height="500"
          row-id="id"
          highlight-current-row
          text-algin="center"
          :print-config="{}"
          header-align="center"
        >
          <vxe-table-column
            field="name"
            min-width="120"
            align="center"
            title="字段名"
          />
          <vxe-table-column
            field="fieldTypeName"
            max-width="100"
            align="center"
            title="配置类型"
          />
          <vxe-table-column
            field="dataTypeName"
            max-width="100"
            align="center"
            title="数据类型"
          />
          <vxe-table-column
            title="输入提示"
            field="dataPrompt"
            align="center"
            min-width="180"
          />
          <vxe-table-column
            title="字段长度"
            field="dataLength"
            align="center"
            width="140"
          />
          <vxe-table-column
            title="修改"
            field="hasModify"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-checkbox v-if="scope.row.fieldType === 1" v-model="scope.row.hasModify" :true-label="1" :false-label="0" @change="getStatus(scope.row)"/>
            </template>
          </vxe-table-column>
          <vxe-table-column
            title="显示"
            field="hasShow"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <el-checkbox v-if="scope.row.fieldType === 1" v-model="scope.row.hasShow" :true-label="1" :false-label="0" @change="getStatus(scope.row)"/>
            </template>
          </vxe-table-column>
          <vxe-table-column
            title="操作"
            fixed="right"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <div class="drag-btn">
                <el-button v-if="scope.row.fieldType === 1"
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, false)"
                >编辑</el-button>
                <el-button  v-else
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, true)"
                >查看</el-button>
                <el-button v-if="scope.row.fieldType === 1"
                  type="text"
                  size="mini"
                  @click="delInfo(scope.row.id)"
                >删除</el-button>
              </div>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
            :current-page.sync="searchParams.pageNum"
            :page-size.sync="searchParams.pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
          />
      </el-card>
    </el-main>
    <el-dialog v-if="dialogFormVisible" width="35%" :title="operationType == 0 ? '添加会员资料' : '编辑会员资料'" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="params" label-width="7.5rem" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="字段编码：" prop="code">
              <el-input v-model="params.code" placeholder="最多输入英文字符" :disabled="isDisabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字段名称：" prop="name">
              <el-input v-model="params.name" placeholder="最多输入中文字符" :disabled="isDisabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="字段配置类型：" prop="fieldType">
              <el-select v-model="params.fieldType" placeholder="请选择配置类型" disabled>
                <el-option label="固有" :value="0" />
                <el-option label="自定义" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据类型：" prop="dataType" class="radio-input">
              <el-select v-model="params.dataType" placeholder="请选择数据类型" :disabled="isDisabled" @change="dataTypeC">
                <el-option label="文本" :value="1" />
                <el-option label="数字" :value="2" />
                <el-option label="日期" :value="3" />
                <el-option label="单选" :value="5" />
                <el-option label="多选" :value="6" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="params.dataType === 5 || params.dataType === 6 ">
            <el-form-item label="数据选项：" class="radio-input">
              <!-- optionsMsg:'',optionsValue:'' -->
              <div class="item-cont">
                <div v-for="(item,index) in params.optionsItemList" :key="index" class="item-option">
                  <div><span>key：</span><el-input v-model="item.optionsMsg" :disabled="isDisabled" /></div>
                  <div><span>val：</span><el-input v-model="item.optionsValue" :disabled="isDisabled" /></div>
                  <i v-if="index > 0" class="el-icon-remove" @click="$delete(params.optionsItemList,index)"></i>
                  <i v-else class="el-icon-circle-plus" @click="addC"></i>
                </div>
              </div>

            </el-form-item>
          </el-col>
           <el-col :span="24">
            <el-form-item label="字段长度：" prop="dataLength">
              <el-input v-model.number="params.dataLength" placeholder="请输入字段长度" :disabled="isDisabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="输入提示：" prop="dataPrompt">
              <el-input v-model="params.dataPrompt" placeholder="最多输入中文字符" :disabled="isDisabled" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="是否必填：" prop="hasRequired">
              <el-checkbox v-model="params.hasRequired" :true-label="1" :false-label="0"/>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="是否可修改：" prop="hasModify">
              <el-checkbox v-model="params.hasModify" :true-label="1" :false-label="0" :disabled="isDisabled"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否显示：" prop="hasShow">
              <el-checkbox v-model="params.hasShow" :true-label="1" :false-label="0" :disabled="isDisabled"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="!isDisabled" type="primary" @click="updateExtendField">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { getPageList, addExtendField, modifyExtendField, getExtendFieldInfo, updateExtendFieldStatus, delExtendField } from '@/api/org/orgSetting'
export default {
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      operationType: 0, // 0 添加 1 注册
      isDisabled: false,
      searchParams:{
        pageNum:1,
        pageSize:20
      },
      total:0,
      rules: {
        code: [{
          required: true,
          message: '请填写字段编码',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请填写字段名称',
          trigger: 'blur'
        }],
        fieldType: [{
          required: true,
          message: '请选择配置类型',
          trigger: 'blur'
        }],
        dataType: [{
          required: true,
          message: '请选择数据类型',
          trigger: 'blur'
        }],
        dataLength: [{
          required: true,
          message: '请填写字段长度',
          trigger: 'blur'
        }],
        dataPrompt: [{
          required: true,
          message: '请填写字段输入提示',
          trigger: 'blur'
        }]
      },
      params: {
        name: '',
        type: '0',
        info: ''
      },
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    dataTypeC(val){
      if(val === 5 || val === 6){
        this.params.optionsItemList = [{optionsMsg:'',optionsValue:'',checked:false}]
      }else{
        this.params.optionsItemList = null
      }
    },
    addC(){
      this.params.optionsItemList.push({optionsMsg:'',optionsValue:'',checked:false})
    },
    getStatus(row) {
      updateExtendFieldStatus({
      id:row.id,
      hasRequired: row.hasRequired,
      hasModify: row.hasModify,
      hasShow: row.hasShow
      }).then(res =>{
        if(res){
          this.$message.success('修改成功！')
          this.getList()
        }else{
          this.$message.error('修改失败！')
          this.getList()
        }

      })
    },
    getList() {
      getPageList(this.searchParams).then(response => {
        this.list = response.records
        this.total = response.total
      })
    },
    getInfo() {
      getExtendFieldInfo(this.operationType).then(res => {
        this.params = res
      })
    },
    openDialog(type, i) {
      this.isDisabled = i
      this.dialogFormVisible = true
      this.operationType = type
      if (type !== 0) {
        this.getInfo()
      } else {
        this.params = {
          code:null,
          name:null,
          dataType:null,
          dataLength:null,
          dataPrompt:null,
          hasRequired:0,
          hasModify:0,
          hasShow:0,
          fieldType:1,
          optionsItemList:[{optionsMsg:'',optionsValue:'',checked:false}]
        }
      }
    },
    delInfo(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delExtendField(id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    updateExtendField() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          var data = JSON.parse(JSON.stringify(this.params))
          if (this.params.type === 1) {
            if (this.lastCostTimeChooseType === '1') {
              if (data.dateTime === undefined) {
                this.$message.error('请选择时间')
                return false
              }
              data.tagsCondition.lastCostTimeRecentDay = ''
              data.tagsCondition.lastCostTimeStartTime = data.dateTime[0]
              data.tagsCondition.lastCostTimeEndTime = data.dateTime[1]
            } else {
              data.tagsCondition.lastCostTimeStartTime = ''
              data.tagsCondition.lastCostTimeEndTime = ''
            }
          }
          if (this.operationType === 0) {
            addExtendField(data).then(response => {
              this.$message.success('添加成功')
              this.dialogFormVisible = false
              this.getList()
            })
          } else {
            modifyExtendField(data).then(response => {
              this.$message.success('修改成功')
              this.dialogFormVisible = false
              this.getList()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .item-cont{
    width: 100%;
    .item-option{
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      &:not(:last-child){
        padding-bottom: 5px;
      }
      >div{
        width: 40%;
        white-space: nowrap;
        .el-input{
          width: calc(100% - 35px)
        }
      }
      >i{
        font-size: 25px;
      }
    }
  }

</style>
